<template>
  <div>
    <h1>组合式函数</h1>
    <div>Mouse position is at: {{ x }}, {{ y }}</div>
    <button @click="toggleDark">切换暗黑模式</button>

    <!-- <button type="button" @click="fVal++">修改fval {{ fVal }}</button> -->

    <!-- <p>{{ bar }}</p> -->
  </div>
</template>

<script setup>
import { useDark, useMouse, useToggle } from '@vueuse/core'

const { x, y } = useMouse()

const isDark = useDark()

const toggleDark = () => {
  isDark.value = !isDark.value
}

// const toggleDark = useToggle(isDark)

// import { ref } from 'vue'
// import { useMouse } from './hooks/mouse'

// const fVal = ref(2000)

// const { x, y } = useMouse(() => fVal.value)
// const { x: xn, y: yn } = useMouse(fVal)

// const { bar } = useMouse(fVal)

// console.log(bar.value)

// import { ref, onMounted, onUnmounted } from 'vue'

// const x = ref(0)
// const y = ref(0)

// function update(event) {
//   x.value = event.pageX
//   y.value = event.pageY
// }

// onMounted(() => window.addEventListener('mousemove', update))
// onUnmounted(() => window.removeEventListener('mousemove', update))
</script>

<style></style>
